<template>
  <div>
    <el-row class="p-d b-f header">
      <el-page-header @back="goBack" :content="title">
      </el-page-header>
      <span class="saveBtn" v-if="isFlag!=='look'">
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button type="primary" plain @click="goBack">取消</el-button>
      </span>
    </el-row>
    <div class="p-d">
      <div class="p-d b-f">
        <el-row class="p-b">
          <h1 class="before">基本信息</h1>
        </el-row>
        <el-form ref="ruleForm" :model="form" :rules="rules" label-width="160px" size="medium">
          <el-row>
            <el-col :span="12">
              <el-form-item label="科研设施（中文）名称：" prop="name">
                <el-input v-model="form.name" placeholder="请输入" :disabled="isFlag=='look'" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="科研设施（英文）名称：" prop="name">
                <el-input v-model="form.name2" placeholder="请输入" :disabled="isFlag=='look'" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="科研设施编号：" prop="name">
                <el-input v-model="form.name3" placeholder="请输入" :disabled="isFlag=='look'" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="科研设施类别：" prop="name">
                <el-radio-group v-model="form.type">
                  <el-radio v-for="(item, index) in selectArr" :key="index" :label="item">{{item}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学科领域：" prop="name">
                <el-select style="width: 100%;" v-model="form.name4" :disabled="isLook">
                  <el-option v-for="item in selectArr3" :label="item" :value="item" :key="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="建设情况：" prop="name">
                <el-radio-group v-model="form.type2">
                  <el-radio v-for="(item, index) in selectArr2" :key="index" :label="item">{{item}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="启用日期：" prop="yearStr">
                <el-date-picker v-model="form.yearStr" type="date" placeholder="选择日期" :disabled="isFlag=='look'">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="安放地址：" prop="departmentName">
                <el-input v-model="form.departmentName" placeholder="请输入" :disabled="isFlag=='look'" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="投资规模：" prop="budget" class="flex-rowform">
                <el-input v-model="form.budget" placeholder="请输入" type="number" oninput="if(value<0)value=0" :disabled="isFlag=='look'" />
                <!-- <span class="r-span">（万元）</span> -->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="设施图片：" prop="fileName">
                <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible" title="预览" top="5vh">
                  <div style="width: 100%;height: 100%;text-align: center;">
                    <img width="70%" height="70%" :src="dialogImageUrl" alt="">
                  </div>
                </el-dialog>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row class="p-b">
          <h1 class="before">服务信息</h1>
        </el-row>
        <el-form ref="ruleForm" :model="form" :rules="rules" label-width="160px" size="medium">
          <el-row>
            <el-col :span="12">
              <el-form-item label="共享范围：" prop="name">
                <el-input v-model="form.name6" placeholder="请输入" :disabled="isFlag=='look'" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="服务方式：" prop="name">
                <el-radio-group v-model="form.name7">
                  <el-radio v-for="(item, index) in selectArr4" :key="index" :label="item">{{item}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="服务内容：" prop="name">
                <el-input v-model="form.name8" placeholder="请输入" type="textarea" rows="4" :disabled="isFlag=='look'" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="收费标准：" prop="name">
                <el-input v-model="form.name9" placeholder="请输入" type="textarea" rows="4" :disabled="isFlag=='look'" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="管理单位：" prop="name">
                <el-select style="width: 100%;" v-model="form.name10" :disabled="isLook">
                  <el-option v-for="item in selectArr5" :label="item" :value="item" :key="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人：" prop="name">
                <el-input v-model="form.name11" placeholder="请输入" :disabled="isFlag=='look'" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="办公电话：" prop="name">
                <el-input v-model="form.name12" placeholder="请输入" :disabled="isFlag=='look'" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="移动电话：" prop="name">
                <el-input v-model="form.name13" placeholder="请输入" :disabled="isFlag=='look'" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="通讯地址：" prop="name">
                <el-input v-model="form.name13" placeholder="请输入" :disabled="isFlag=='look'" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <PreviewPdf v-if="showPdf" :pdfUrl="pdfUrl" @closeLookPdf="closeLookPdf" />
  </div>
</template>

<script>
// import {
//   addGuide,
//   updateGuide,
//   downloadTemplate,
//   uploadAndExtractItem,
//   getDetail
// } from '@/api/guide.js'
import PreviewPdf from '@/views/common/previewPdf.vue'
export default {
  components: { PreviewPdf },
  computed: {
    isFlag() {
      return this.$route.params.flag
    },
    rowId() {
      return this.$route.params.id
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      showPdf: false,
      pdfUrl: null,
      title: '',
      accept: '.doc,.docx,.pdf',
      form: {
        name: '',
        name2: '',
        name3: '',
        name4: '',
        name5: '',
        name6: '',
        name7: '按机时预约',
        name8: '',
        yearStr: '',
        departmentName: '',
        budget: '',
        type: '科研实验',
        type2: '在建'
      },
      rules: {
        name: [
          { required: true, message: '名称不能为空！', trigger: 'blur' }
        ],
      },
      selectArr: [
        '科研实验', '装备试验', '教学', '训练', '其他'
      ],
      selectArr2: [
        '在建', '完成', '准备', '计划'
      ],
      selectArr3: [
        '材料科学', '化学', '生物学', '物理学', '基础医学', '环境科学', '技术及资源科学技术', '药学', '电子与通信技术', '农学'
      ],
      selectArr4: [
        '按机时预约', '按次数预约', '按项目预约', '送样检测'
      ],
      selectArr5: [
        '北京大学', '清华大学', '中国科学院', '中国农业科学院', '深圳市大型科学仪器共享平台', '重庆科技资源共享平台'
      ],
      queryParams: {
        total: 0,
        currentPage: 1,
        pageSize: 100000
      },
    }
  },
  created() {
    switch (this.isFlag) {
      case 'add':
        this.title = '新增科研设施'
        break
      case 'edit':
        this.title = '修改科研设施'
        this.getDetail()
        break
      case 'look':
        this.title = '查看科研设施'
        this.getDetail()
        break
    }
  },
  watch: {
    'queryString.itemName'(newValue) {
      this.tableData = this.allTableData.filter(
        item => item.itemName.indexOf(newValue) > -1
      )
    },
    'queryString.domainName'(newValue) {
      this.tableData = this.allTableData.filter(
        item => item.domainName.indexOf(newValue) > -1
      )
    },
    deep: true
  },
  mounted() { },
  methods: {
    downloadLink(item) {
      this.downloadByUrl(item.fileName, item.filePath)
    },
    lookPdf(url) {
      this.pdfUrl = url
      this.showPdf = true
    },
    closeLookPdf() {
      this.showPdf = false
      this.pdfUrl = null
    },
    getDetail() {
      this.form = {
        name: '活细胞实时成像分析系统',
        name2: 'Real time imaging and analysis system for live cells',
        name3: '武器研究院',
        name4: '物理学',
        name5: '全社会共享',
        name6: '全社会共享',
        name7: '按机时预约',
        name8: '支持在线预约，在线预约服务',
        name9: '200元/小时',
        name10: '中国科学院',
        name11: '王丽丽',
        name12: '13820384935',
        name13: '北京、北京市、海淀区',
        yearStr: '2024-01-21',
        departmentName: '北京市、海淀区',
        budget: '2000',
        type: '科研实验',
        type2: '完成'
      }
      // getDetail({ id: this.rowId }).then(res => {
      //   this.form = res.data.techGuide
      //   this.allTableData = res.data.techGuideItems
      //   this.tableData = res.data.techGuideItems
      // })
    },
    goBack() {
      this.$router.go(-1)
    },
    submitForm() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          // let params = {
          //   techGuide: this.form,
          //   techGuideItems: this.tableData
          // }
          if (this.isFlag == 'add') {
            // addGuide(params).then(() => {
            //   this.goBack()
            // })
          } else {
            // updateGuide(params).then(() => {
            //   this.goBack()
            // })
          }
        } else {
          return false
        }
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 下载模板
    download() {
      // downloadTemplate()
    },
    // xls
    handleChangeXls(file) {
      // uploadAndExtractItem
      const _file = file?.raw ?? file
      const formData = new FormData()
      formData.append('file', _file)
      formData.append('pathType', file.name.split('.').pop())
      // uploadAndExtractItem(formData).then(res => {
      //   this.allTableData = res.data
      //   this.tableData = res.data
      // })
    },
    // 多次上传覆盖
    handleExceedXls(file) {
      this.$refs.uploadRefXls.clearFiles()
      this.handleChangeXls(file[0])
    },
    deleteFun(row) {
      let itemIndex = this.tableData.findIndex(function (obj) {
        return row === obj
      })
      // this.tableData.splice(itemIndex, 1)
      this.allTableData.splice(itemIndex, 1)
    },
  }
}
</script>

<style lang="less" scoped>
  ::v-deep.flex-rowform {
    .el-form-item__content {
      display: flex;
    }
    .r-span {
      display: inline-block;
      width: 100px;
      line-height: 40px;
    }
  }
  .header {
    position: relative;
    .saveBtn {
      position: absolute;
      right: 20px;
      top: 10px;
    }
  }
</style>